<template>
  <div class="tinymce-editor">
    <vxe-button
      v-if="readonly"
      mode="text"
      status="primary"
      @click="openPreview"
      class="!p-0"
    >
      点击查看
    </vxe-button>
    <Editor
      v-show="!readonly"
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      ref="editorRef"
      :key="timestamp"
      @onClick="onClick"
    ></Editor>
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
// 列表插件
import 'tinymce/plugins/lists'
import 'tinymce/plugins/advlist'
// 上传图片插件
import 'tinymce/plugins/image'
// 表格插件
import 'tinymce/plugins/table'
// 自动识别链接插件
import 'tinymce/plugins/autolink'
// 预览插件
import 'tinymce/plugins/preview'

import 'tinymce/plugins/hr'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/code'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/quickbars'
import 'tinymce/plugins/autoresize'

import { uploadFile } from '@/api/upload'

export default {
  name: 'YEditor',
  components: {
    Editor
  },
  props: {
    // 传入一个value，使组件支持v-model绑定
    value: {
      type: String,
      default: ''
    },
    disabled: Boolean,
    readonly: Boolean,
    menubar: {
      // 菜单栏
      type: String,
      default: 'file edit insert view format table'
    },
    // 工具栏配置
    toolbar: {
      type: [String, Array],
      default:
        'undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | bullist numlist | image table | fontselect fontsizeselect forecolor backcolor | removeformat bold italic underline strikethrough |  indent outdent  hr  superscript subscript  | insertdatetime  preview code codesample'
    },
    // 富文本高度
    height: {
      type: Number,
      default: 400
    },
    // 相关插件配置
    plugins: {
      type: String,
      default:
        'lists advlist image table autolink preview hr insertdatetime codesample wordcount code fullscreen quickbars'
    }
  },
  data() {
    return {
      // 当前时间戳,是为了解决回显问题
      timestamp: 0,
      //初始化配置
      init: {
        language_url: process.env.VUE_APP_PUBLICPATH + 'tinymce/langs/zh_CN.js', // 根据自己文件的位置，填写正确的路径，注意/可以直接访问到public文件
        language: 'zh_CN',
        skin_url: process.env.VUE_APP_PUBLICPATH + 'tinymce/skins/ui/oxide', // 根据自己文件的位置，填写正确的路径。路径不对会报错
        height: this.height,
        toolbar: this.toolbar,
        plugins: this.plugins,
        content_style: 'img {max-width:100%;}',
        toolbar_mode: 'sliding',
        quickbars_selection_toolbar:
          'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
        quickbars_insert_toolbar: false,
        branding: false,
        menubar: false,
        lineheight_formats: '0 1 1.2 1.5 1.6 1.8 2 2.4',
        image_prepend_url: this.FILE_BASE_URL,
        image_description: false,
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        // 配置了此方法,即可手动选择图片
        images_upload_handler: async (blobInfo, success, failure) => {
          const file = blobInfo.blob() //转化为易于理解的file对象

          const module = 'Web'

          try {
            const res = await uploadFile(file, module)
            success(res.path)
          } catch (err) {
            failure(err)
          }
        },
        resize: false
      },
      myValue: this.value
    }
  },
  methods: {
    // 需要什么事件可以自己增加 可用的事件参照文档=> https://github.com/tinymce/tinymce-vue
    onClick(e) {
      this.$emit('onClick', e, tinymce)
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.myValue = ''
    },

    // 解决切换页签后数据回显问题
    setTinymceContent() {
      setTimeout(() => {
        this.timestamp = new Date().getTime()
      }, 10)
    },
    // 预览
    openPreview() {
      const editor = this.$refs.editorRef.editor
      editor.execCommand('mcePreview')
    }
  },
  watch: {
    value: {
      handler(newValue) {
        this.myValue = newValue
      },
      immediate: true
    },
    myValue(newValue) {
      this.$emit('input', newValue)
    }
  }
}
</script>
